<template>
  <div class="main">
      <div class="table">
          <div class="inner">
            <el-tree
              style="height: 100%;"
              :data="organization"
              :props="defaultProps"
              node-key="dptNameB"
              default-expand-all
              highlight-current
              ref="tree"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
            </el-tree>
          </div>
      </div>
      <div class="rightList">
        <el-form class="form" :model="datafrom" label-width="8rem" ref="fltForm">
          <el-row :gutter="7" class="row">
            <el-col :span="5">
              <el-form-item size="mini" label="账号代码:" prop="datacode">
                <el-input clearable  maxlength="192" v-model="datafrom.datacode" size="mini" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item size="mini" label-width="10px">
                <el-button size="mini" type="primary" @click="searchList">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="tablea">
          <div class="innera" style="padding-left: 10px;" ref="inner">
            <div class="btn">
              <el-button size="mini" type="success" plain @click="addNew">新增用户</el-button>
              <el-button size="mini" type="primary" plain @click="edit('diong')">编辑用户</el-button>
              <el-button size="mini" type="danger" plain @click="del">删除用户</el-button>
              <el-button size="mini" type="primary" plain @click="del" disabled>导出用户</el-button>
              <el-button plain size="mini" type="primary" @click="resetpwd">密码重置</el-button>
            </div>
            <el-table :height='700' style="width: 100%" :data="userdepartmentList" :highlight-current-row="true" @row-click="rowClick" border :header-cell-style="{
                textAlign: 'center'
              }"
              @row-dblclick="view">
              <el-table-column size="mini" align="left" width="60" label="序号" :index="indexMethod" type="index"></el-table-column>
              <el-table-column size="mini" align="left" show-overflow-tooltip label="账号代码" prop="usrCode" sortable></el-table-column>
              <el-table-column size="mini" align="left" show-overflow-tooltip label="账号名称" prop="usrName" sortable></el-table-column>
              <el-table-column size="mini" align="left" show-overflow-tooltip label="区域中心" prop="dptName" sortable></el-table-column>
              <el-table-column size="mini" align="left" show-overflow-tooltip label="角色" prop="roleName" sortable></el-table-column>
              <el-table-column size="mini" align="center" show-overflow-tooltip label="联系电话" prop="usrCellphone" sortable></el-table-column>
              <el-table-column size="mini" align="left" show-overflow-tooltip label="邮箱" prop="usrEmail" sortable></el-table-column>
              <el-table-column size="mini" align="center" show-overflow-tooltip label="状态" prop="usrStatusName" sortable>

              </el-table-column>
              <el-table-column size="mini" align="left" show-overflow-tooltip label="备注" prop="usrRemark" sortable></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
              class="pagination"
              small
              background
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Pagination.currentPage"
              :page-sizes="Pagination.pageSizeList"
              :page-size="Pagination.pageSize"
              :layout="Pagination.layout"
              :total="Pagination.total">
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 弹出框 -->
    <el-dialog
    v-el-drag-dialog
      width="40%"
      v-if="showDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      :title="operate">
      <el-form  :model="tckData" label-width="100px" ref="tckData"  size="mini" :rules="addRules">
        <el-row>
        <el-col :span="24">
            <el-form-item label="用户账号：" prop="usrCode" >
              <el-input  maxlength="20" :disabled='disabledA' style="width: 100%" v-model="tckData.usrCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="用户名称：" prop="usrName" >
              <el-input  maxlength="20" :disabled='disabled' style="width: 100%" v-model="tckData.usrName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="show">
          <el-col :span="24">
            <el-form-item label="账号密码：" prop="usrPassword">
              <el-input  maxlength="30" :disabled='disabled' style="width: 100%" v-model="tckData.usrPassword"  type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="show">
          <el-col :span="24">
            <el-form-item label="密码确认：" prop="reusrPassword">
              <el-input  maxlength="30" :disabled='disabled' style="width: 100%" v-model="tckData.reusrPassword"  type="password"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="区域中心：" prop="dptName" :disabled='disabled'>
              <el-popover
                placement="bottom"
                width="400"
                trigger="click"
                v-model="showpop"
                :disabled='disabled'
                >
                  <el-tree
                  :disabled='disabled'
                  :data="organizationA"
                  :props="defaultPropsA"
                  node-key="usrDpts"
                  default-expand-all
                  ref="tree"
                  @node-click="chose"
                  >
                  </el-tree>
                <el-input  slot="reference" :disabled='disabled' placeholder="点击选择区域中心" v-model="tckData.dptName"></el-input>
              </el-popover>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="角色：" prop="usrRles">
                  <el-select  v-model="tckData.usrRles" :disabled='disabled' multiple placeholder="请选择 (可多选)" style="width: 100%">
                    <el-option
                      v-for="(item,index) in options"
                      :key="index"
                      :label="item.rleName"
                      :value="item.rleId">
                    </el-option>
                  </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="联系电话：" prop="usrCellphone">
              <el-input  maxlength="20" :disabled='disabled' style="width: 100%" v-model="tckData.usrCellphone" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="邮箱：" prop="usrEmail">
              <el-input  maxlength="37" :disabled='disabled' style="width: 100%" v-model="tckData.usrEmail" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item  label="状态：" prop="usrStatus">
              <el-radio-group v-model="tckData.usrStatus" :disabled='disabled'>
                <el-radio label="Y">可用</el-radio>
                <el-radio label="N">不可用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="usrRemark">
              <el-input type="textarea" :disabled='disabled' resize="none" v-model="tckData.usrRemark"   maxlength="150" style="width: 100%" rows="3"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="el-dialog__footer">
          <el-col :span="24">
            <el-form-item>
              <el-button v-if="isEditMode" @click="save('tckData')" type="primary">保存</el-button>
              <el-button @click="close">关闭</el-button>

            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
// import { encrypt, decrypt } from '@/utils/crypto'
// import { setMd5 } from '@/utils/utils'
import {
  regionalCenterLeft,
  regionalCenterRightList,
  addRegionalCenterRightList,
  eitregionalCenter,
  czregionalCenter,
  RegionalCenterJS,
  editRegionalCenterRightList,
  RegionalCenterzx
} from '@/request/api'

export default {
  name: 'router.sysuserdepartment',
  mixins: [resizeMixin, paginationMixin,],

  data() {
    var reusrPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.tckData.usrPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      disabledA:false,
      disabled:false,
      showpop: false,
      tckData:{},//传给弹出框的数据
      diong:'E',
      datafrom: {
        datacode: ''
      },
      userdepartmentList: [],

      isEditMode: true,
      show: true,
      operate: '',
      showDialog: false,
      showSeeDialog: false,

      currentRow: [],
      currentFltInfo: {},

      roleStatus: [],
      treeHeight: 0,
      //选中行数据
      selectData:[],

      data2: [],
      data1: [],

      options: [],
      // organization:[],
      defaultProps: {
        children: 'sysDepartmentChildren',
        label: 'dptName'
      },
      defaultPropsA: {
        children: 'sysDepartmentChildren',
        label: 'dptName'
      },
      // maxHeight: -1,
      dptId: '',
      PageIndexs:'',
      PageSizes:'',
      addRules:{
        usrName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        usrCode: [
          { required: true, message: '请输入用户账号', trigger: 'blur' },
        ],
        // 密码确认校验
        usrPassword: [
          { required: true, message: '请输入密码', trigger:  ['blur','change'] },
          { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/,
            message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8-30位'
          }
        ],
        reusrPassword: [
          { required: true, validator: reusrPassword, message: '两次密码输入不一致', trigger:  ['blur','change'] }
        ],
        dptName: [
          { required: true, message: '请选择区域中心', trigger: 'change' },
        ],
        usrRles: [
          { required: true, message: '请选择角色', trigger: 'change' },
        ],
        usrCellphone: [
          {
            pattern: /^[0-9]+$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        usrEmail: [
          {
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,
            message: '请输入正确的Email',
            trigger: 'blur'
          },
        ],
        // usrStatus: [
        //   { required: true, message: '请选择状态', trigger: 'blur' },
        // ]
      },
    }
  },
  computed: {
    organization() {
      return this.data2.map( item => {
        item['dptNameB']  = item.dptName
        return item
      })
    },
    organizationA() {
      return this.data1.map( item => {
        item['dptNameA']  = item.dptName
        return item
      })
    }
  },
  methods: {

    chose(data) {
      // 区域中心
      this.tckData.dptName = data.dptName

      this.tckData.usrDpts = data.dptId

      this.showpop = false
    },
    //密码重置
    resetpwd(){
      if(Object.keys(this.currentRow).length){
        czregionalCenter({usrId:this.currentRow.usrId}).then(res=>{
          if(res.success=='1'){
            this.$alert('密码重置成功！重置为Abc12345','提示',{
              confirmButtonText: '确定'
            })
            this.currentRow=''
          }else{
            this.$alert('密码重置失败！请稍后再试','提示',{
              confirmButtonText: '确定'
            })
            this.currentRow=''
          }
          // this.getdataList()
          this.refreshList()
        })
      }else{
        this.$alert('请选择需要重置密码的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
    },
    //列表
    // getdataList(){
    //   let PageSizes=this.Pagination.pageSize.toString()
    //   let PageIndexs=this.Pagination.currentPage.toString()
    //   regionalCenterRightList({ usrCode:this.datafrom.datacode,usrEtpId:-1, usrDpts:this.dptId,PageSizes:PageSizes,PageIndexs:PageIndexs,}).then(res=>{
    //     this.userdepartmentList = res.data.FTKJWLHYPT
    //     this.Pagination.total=res.data.total.FTKJWLHYPT
    //   })
    // },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      regionalCenterRightList({
        usrCode:this.datafrom.datacode,
        usrDpts:this.dptId,
        PageIndexs:this.Pagination.currentPage.toString(),
        PageSizes:this.Pagination.pageSize.toString()
      }).then(response => {
        this.userdepartmentList = response.data.FTKJWLHYPT
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },

    //新增
    addNew() {
      this.diong = ''
      this.show = true
      this.showDialog = true
      this.isEditMode = true
      this.disabled = false
      this.disabledA = false
      this.operate = '新增'
      this.tckData= {
        usrRles:[],
        // usrEtpId:'',
        usrCode:'',
        usrName:'',
        usrPassword:'',
        usrCellphone:'',
        usrEmail:'',
        usrPreuserId: '',
        usrStatus:'Y',
        usrRemark:'',
        usrDpts:1,
        usrType:'',
        dptName:'',
      }

    },
    //编辑
    edit() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要编辑的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.show = false
      this.operate = '编辑'
      this.diong='E'
      this.isEditMode = true
      this.disabled = false
      this.disabledA = true
      this.tckData = Object.assign({}, this.currentRow)
      // 字符串转数组

      if (this.tckData.usrRles) {
        let arrs= []
        let arr=this.tckData.usrRles.split(',')

        arr.forEach(item => {
          arrs.push(Number(item))
        })
        this.tckData.usrRles = arrs
      }
      this.showDialog = true
    },
    //双击查看
    view (row) {
      this.operate ='账户信息'
      this.show = false
      this.isEditMode = false
      this.disabled = true
      this.disabledA = true
      this.tckData = Object.assign({}, row)
      // 字符串转数组
      if (this.tckData.usrRles) {
        let arrs= []
        let arr = this.tckData.usrRles.split(',')
        arr.forEach(item => {
          arrs.push(Number(item))
        })
        this.tckData.usrRles = arrs
      }
      this.showDialog = true

    },
    //编辑
    save(tckData){
      this.$refs[tckData].validate((valid) => {
        if (valid) {
          if (this.diong =='E') {
            editRegionalCenterRightList(this.tckData).then(res=>{

              if(res.success !== '1'){
                this.$message({
                  type: 'success',
                  message: '编辑失败'
                })
                return
              }else{

                this.$message({
                  type: 'success',
                  message: '编辑成功'
                })

                // this.getdataList()
                this.refreshList()
                this.close()
              }
            })
          }else{
            addRegionalCenterRightList(
              this.tckData,
            ).then( res =>{
              if(res.success !=='1'){
                this.$message({
                  type: 'success',
                  message: '添加失败'
                })
                return
              }else{
                this.$message({
                  type: 'success',
                  message: '添加成功'
                })
                this.close()
                // this.getdataList()
                this.refreshList()
              }
            })
          }
        } else {
          return false
        }
      })
    },

    //获取当前行
    rowClick(row) { this.currentRow = row},
    //删除
    del() {
      if (Object.keys(this.currentRow).length == 0) {
        this.$alert('请选择需要删除的数据', '提示', {
          confirmButtonText: '确定'
        })
      }
      this.$confirm('您确认要删除选定的数据吗?', '提示', {
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {

        eitregionalCenter({usrId:this.currentRow.usrId}).then(() => {
          this.$message({
            message: '删除成功！',
            type: 'success',
            showClose: true
          })
          // this.getdataList()
          this.refreshList()
        })
      })
    },
    // 左边树数据
    getdataItem() {
      regionalCenterLeft().then(res=>{
        this.data2 = res.data.FTKJWLHYPT
      })
    },
    //区域中心
    getzuzhiA() {
      RegionalCenterzx().then(res=>{
        this.data1 = res.data.FTKJWLHYPT

      })
    },
    // 树点击
    handleNodeClick(data) {
      this.dptId = data.dptId
      this.typeData()
    },
    // 点击左边列表获取右边列表数据
    typeData(){
      let PageSizes=this.Pagination.pageSize.toString()
      let PageIndexs=this.Pagination.currentPage.toString()
      regionalCenterRightList({ usrCode:'', usrDpts:this.dptId,usrEtpId:-1,PageSizes:PageSizes,PageIndexs:PageIndexs,}).then(res=>{
        this.userdepartmentList = res.data.FTKJWLHYPT
        this.Pagination.total=res.data.total.FTKJWLHYPT
      })
    },
    // 获取角色列表
    getroles () {
      RegionalCenterJS().then(res=>{
        this.options = res.data.FTKJWLHYPT
      })
    },
    //点击查询
    searchList(){
      // this.getdataList()
      this.refreshList()
    },
    //关闭弹出框
    close(){
      this.showDialog= false
    },

  },

  mounted() {

  },
  created() {
    // this.getdataList()
    this.refreshList()
    this.getdataItem()
    this.getroles()
    this.getzuzhiA()
  }
}
</script>

<style lang="scss" scoped>
.el-select {
    width: 100%;
}
.main {
  padding: 1.5rem;
  height:100%;
}
.btn{
  padding-left: 5px;
  padding-bottom: 5px;
}
.table {
  float: left;
  width: 20%;
  // overflow: hidden;
  height: 777px;
  .inner {
    width: 100%;
    height: 100%;
    // overflow: hidden;
  }
}
.rightList{
  float: right;
  width: 80%;
}


</style>
